<template>
  <ul class="icons-list">
    <li v-for="icon in iconList" :key="icon.id">
      <img :src="icon.imgUrl" />
      <span>{{ icon.title }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  name: "Icons",
  props:{
    iconList: Array
  },
};
</script>

<style lang="scss" scoped>
.icons-list{
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    
    li{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: .2667rem 0;
    }
    img{
        width: .9333rem;
        margin-bottom: .2133rem;
    }

    span{
        font-size: .32rem;
    }
}
</style>